<template>
  <div class="content">
    <swiper :options="swiperOption" :style="{height:height}">
      <swiper-slide v-for="(slide, $index) in reqData.list">
        <div class="banner_box">
          <img :src="slide.img">
          <div class="look_more b_radius" v-if="slide.skip_type">
            <router-link :to="{name: 'newsList'}" class="b_radius"><p>{{slide.skip_type==1?'相关新闻':'点击查看'}}</p></router-link>
          </div>
          <div class="next abs ftc" v-if="$index!==reqData.list.length-1"><img src="/static/images/about/next.png" alt=""></div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  export default {
    name: 'aboutUs',
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          direction: 'vertical',
          slidesPerView: 1,
          grabCursor: true,
//          height: '30000px',
//          setWrapperSize: true,
//          observeParents: true,
          autoHeight: true,
          mousewheelControl: true,
          onSlideChangeEnd: swiper => {
            console.log('onSlideChangeEnd', swiper.realIndex)
          }
        },
        height: window.innerHeight + 'px',
        reqData: {list: []},
      }
    },
    methods: {
      goAdvDetail (params) {
        console.info(params.slide)
      },
      getData (params) {
        let self = this
        self.$rpc(self.$api.media_platforms, params, function (data) {
          console.info(data)
          self.reqData = Object.assign({}, self.reqData, data)
        })
      }
    },
    components: {swiper, swiperSlide},
  // 创建的时候请求数据
    created () {
      // 表示实例
      this.getData({
        'action_type': 'get_banner_list',
        'banner_type': 1,
      })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content{background:url(/static/images/about/h5_bg.jpg) no-repeat center top;}
  .banner_box{overflow:auto; height:100%; padding:0 15px;}
  .banner_box{overflow:auto; height:100%; background-position:center center; background-repeat:no-repeat; background-size:contain; width:93%; margin:0 auto;}
  .banner_box img{/*height:100%;*/ height:auto;}
  .look_more{width:32%; position:absolute; left:50%; margin-left:-15%; bottom:12%; border:1.5px solid #f5cadd; padding:2px; text-align:center; color:#f5cadd}
  .look_more p{border:1px solid #f5cadd; padding:4px 0px;color: #f5cadd}
  .next {bottom:2%;height:20px; z-index:10; width:16px; left:50%; margin-left:-8px; position:absolute;}
  .next img {width:16px;height:16px;animation:change 1.5s infinite;-webkit-animation:change 1.5s infinite;}
  @keyframes  change{0%{opacity:1}50%{opacity:0.5}100%{opacity:0;}}
  @-webkit-keyframes  change{0%{opacity:1}50%{opacity:0.5}100%{opacity:0;}}
  /*新闻详情*/
  .news_box{padding:15px;}
  .news_box .title{text-align:center;color:#000; font-weight:bold; }
  .news_box .textTime{text-align:center;color:#727171; margin:15px 0 10px;}
  .news_box .textCon{text-align:justify;overflow-y:auto; overflow-x:hidden;-webkit-overflow-scrolling: touch;}
  /**/
  .original_btn{ margin:3% auto;  color:#727171; text-indent:25px;font-size:12px;word-break:break-all;}
  /*.original_url{width:100%;}
  .scroll_new{width:100%; height:100%; overflow:scroll;-webkit-overflow-scrolling:touch; position:fixed; left:0; top:44px;}*/
</style>
<style>
</style>
